<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Create Test Bundle</title>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
       <!-- <link rel="stylesheet" type="text/css" href="../../lib/bootstrap/css/bootstrap.css">
        <link rel="stylesheet" type="text/css" href="../../lib/bootstrap/css/bootstrap-responsive.css">
        <link rel="stylesheet" type="text/css" href="../test/css/test.css">
        <link rel="stylesheet" href="../../css/validationEngine.jquery.css" type="text/css"/>
        <link rel="stylesheet" href="../../lib/chosen/chosen.css" />
        <link rel="stylesheet" href="../../lib/smartwizard/smart_wizard.css" type="text/css">
        <script type="text/javascript" src="../../lib/jquery-1.7.1.js"></script>
        <script src="../../lib/jsvalidation/languages/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../lib/jsvalidation/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript" src="../../lib/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
        <script src="../../lib/chosen/chosen.jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript" src="../../lib/smartwizard/jquery.smartWizard.js"></script>
        <script type="text/javascript" src="../../lib/handlebars.js"></script>
        <script type="text/javascript" src="../../lib/ckeditor/ckeditor.js"></script>
        <script type="text/javascript" src="../../lib/ckeditor/adapters/jquery.js"></script>-->



        <script>
          var questionNo = 1;
          var counter = 0;
          var optionsArr = ["A","B","C","D","E","F","G","H"];

          Handlebars.registerHelper("generateQuestionId", function(data) {
            var id = ++counter;
            questionNo++;
            return id;
          });

          Handlebars.registerHelper("currentQuestionId", function(data) {
            return questionNo -1;
          });

          Handlebars.registerHelper("randomId", function(data) {
            return counter;
          });

           $(document).ready(function() {

            $(".add-question").bind("click",function() {
                var source = $("#question-layout").html();
                var templ = Handlebars.compile(source);
                $(".questions-list").append(templ);
                var question = $("#question"+(counter));
               // CKEDITOR.inline(question.find(".question-content").get(0));
               //CKEDITOR.editor(question.find(".question-content").get(0));
               question.find(".question-content").ckeditor();
                $('#wizard').smartWizard("fixHeight");
            });

            $(".add-option").live("click",function() {
              var currentQuestion = $(this).closest(".question-item");
              addOption(currentQuestion);
            });

            $(".show-hide-options").live("click",function() {
              var currentQuestion = $(this).closest(".question-item");
              currentQuestion.find(".options-div").slideToggle();
           });

            $(".remove-question").live("click",function() {
              var questionToBeDeleted = $(this).closest(".question-item");
              var questionNoToBeDeleted =  questionToBeDeleted.attr("id").substring(8);
              //CKEDITOR.instances[questionToBeDeleted.find(".question-content").attr("id")].destroy();
              questionToBeDeleted.remove();
              questionNo--;
              $(".question-item").each(
                 function(i) {
                    var currentQuestionNo  = $(this).attr("id").substring(8);
                    if ( currentQuestionNo < questionNoToBeDeleted ) {
                      
                    }else {
                      var qNoSpan = $(this).find('.question-number span');
                      qNoSpan.text("Question Number " + (currentQuestionNo - 1));
                    }
                 } 
              );
               $('#wizard').smartWizard("fixHeight");
            });

            $(".remove-option").live("click",function(){
              var optionToBeDeleted = $(this).closest("option-item");
              optionToBeDeleted.remove();
            });
            
          })

          function getAnswerTypeChoice(radio) {
            var selected = -1;
            if( $(radio).attr("id") == "singleAnswerType") {
              selected = 1;
            }else if ($(radio).attr("id") == "multiAnswerType") {
              selected = 2;
            }
            var currentQuestion = $(radio).closest(".question-item");
            var selectAnswer = currentQuestion.find("#selectCorrectAnswer");
            selectAnswer.empty();
            var noOfOptionsSeln = currentQuestion.find(".select-options");
            var value = noOfOptionsSeln.val();
            alert(value);
            if(selected == 1) {
               for ( var i = 0 ; i < value ; i ++ ) {
                selectAnswer.append("<input type='radio' name='"+ currentQuestion.attr("id")+"' style='margin:5px' value='"+optionsArr[i]+"'>"+optionsArr[i]+"</input>");
              }
            }else if (selected ==2) {
               for ( var i = 0 ; i < value ; i ++ ) {
                selectAnswer.append("<input type='checkbox' style='margin:5px' value='"+optionsArr[i]+"'>"+optionsArr[i]+"</input>");
              }
            }
          }

          function showOptions(sel) {
            var value = sel.options[sel.selectedIndex].value;
            if ( value == 0 ) {
               return;
            }
             
            var currentQuestion = $(sel).closest(".question-item");
            currentQuestion.find(".options-list").empty();
            for ( var i = 0 ; i < value ; i ++ ) {
                addOption(currentQuestion);
            }
            var selectAnswer = currentQuestion.find("#selectCorrectAnswer");
            selectAnswer.empty();
            if(currentQuestion.find("#multiAnswerType").is(":checked")) {
              for ( var i = 0 ; i < value ; i ++ ) {
                selectAnswer.append("<input type='checkbox' style='margin:5px' value='"+optionsArr[i]+"'>"+optionsArr[i]+"</input>");
              }
            }else {
               for ( var i = 0 ; i < value ; i ++ ) {
                selectAnswer.append("<input type='radio' name='"+ currentQuestion.attr("id")+"' style='margin:5px' value='"+optionsArr[i]+"'>"+optionsArr[i]+"</input>");
              }
            }
          }


          function addOption (currentQuestion) {
              var source = $("#option-layout").html();
              var templ = Handlebars.compile(source);
              var optionsList = currentQuestion.find(".options-list");
              var currentOptionNo = optionsList.find("li").length;
              optionsList.append(templ);
              currentQuestion.find(".option:eq("+currentOptionNo+")").text(optionsArr[currentOptionNo]);
               $('#wizard').smartWizard("fixHeight");
          }

	     </script>

       <!--Handlebar template for the layout of the question-->
      <script id="question-layout"  type="text/x-handlebars-template">
        <li  class="question-item" id="question{{generateQuestionId}}" style="padding-top:15px;">
          <div  style="margin:5px,padding:5px,border:1px;border-style:solid;background-color:#EEEEEE">
           <div class="row-fluid">
              <div class="span4 question-number">
                 <span>Question Number {{currentQuestionId}}</span>
              </div>
               <div class="span4">
                 
              </div>
              <div class="pull-right">
                <img class="remove-question" src="../../assets/img/error.png"/>
              </div>  
           </div>
            <textarea id="questionContent{{randomId}}" class="question-content"></textarea>
           <br>
            <div class="row-fluid">
             <div class="control-group">
                <label class="control-label" for="noOfOptions">No of Options:</label>
                  <div class="controls" id="noOfOptions">
                    <select class="select-options" onchange ="showOptions(this)">
                      <option value="0" selected="selected">Choose...</option>
                      <option value="2">2</option>
                      <option value="3">3</option>
                      <option value="4">4</option>
                      <option value="5">5</option>
                    </select> 
                  </div>
              </div>
           </div>
           <div class="row-fluid">
              <p>
                <label>Answer Type:</label>
                <span style="margin:5px">
                  <input type="radio" id="singleAnswerType" checked  onclick="getAnswerTypeChoice(this);" name="answerType{{currentQuestionId}}">Single Choice
                  <input type="radio" id="multiAnswerType" onclick="getAnswerTypeChoice(this);" name="answerType{{currentQuestionId}} ">
                  Multiple Choice
                 </span> 
              </p>
           </div>
           <br>
           <div class="row-fluid">
             <div class="control-group inline">
                <label class="control-label" for="correctAnswer">Correct Answer:</label>
                  <div class="controls" id="selectCorrectAnswer">
                  </div>
              </div>
           </div>
           <br>
           <br>
           <div class="row-fluid"> 
             <div class="control-group inline">
                <div class="controls">
                  <button type="button" data-code="0" class="btn btn-info show-hide-options" style="margin-left:2px">Show/Hide Options</button>
                </div>
              </div>
           </div>

           <div class="options-div" class="row-fluid">
             <ul class="options-list" style="padding:5px" >
             </ul>
           </div>
        </li> 
      </script>

      <script id="option-layout" type="text/x-handlebars-template">
        <li class="option-item">
          <div class="row-fluid">
            <div class="span4 option">
               <span></span>
            </div>
          </div>
          <textarea style="width: 98%; height: 150px;">
          </textarea>
          <br>
        </li>
      </script>
    </head>

    <body>
       <div class="row-fluid"> 
         <div class="control-group" style="min-height:50px;">
            <div class="controls">
              <button type="button" class="btn btn-success add-question" style="margin-left:2px">Add Question</button>
              <button type="button" class="btn btn-info" style="margin-left:2px">Save</button>
              <button type="button" class="btn btn-error" style="margin-left:2px">Cancel</button>
            </div>
          </div>
       </div>
       <div class="row-fluid">
        <ul class="questions-list">
        </ul>
       </div> 
    </body>
</html>